<template>
  <layout :showBack="false"
          :showFoot="true">
    <template v-slot:title>
      <el-button type="primary"
                 size="small"
                 icon="el-icon-plus"
                 @click="createWork">新建项目</el-button>
    </template>
    <template v-slot:actions>
      <div class="search">
        <el-input place
                  holder="搜索"
                  v-model="search"
                  prefix-icon="el-icon-search"
                  size="small"
                  style="width:260px;"
                  @blur="loadList"></el-input>
      </div>
    </template>
    <el-table :data="list.records"
              header-row-class-name="cellClass"
              header-cell-class-name="cellClass"
              row-class-name="cellClass"
              cell-class-name="cellClass"
              @row-click="handleRowClick">
      <!-- <el-table-column prop="pkId" label="Id" width="200" align="center">
            </el-table-column> -->
      <el-table-column prop="itemName"
                       label="名称">
      </el-table-column>
      <el-table-column prop="stage"
                       label="项目阶段">
      </el-table-column>
      <el-table-column prop="remark"
                       label="备注">
      </el-table-column>
      <el-table-column label="更新时间"
                       width="240">
        <template slot-scope="scope">
          {{moment(scope.row.createDate).fromNow().replace(/几秒后/,'刚刚')}}
        </template>
      </el-table-column>
      <el-table-column label=""
                       width="80"
                       align="center">
        <template slot-scope="scope">

          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              ...
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="drawGraph">工作分解结构图</el-dropdown-item>
              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="editForm">指标体系关系设计</el-dropdown-item>
              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="fillForm">指标体系关系设计填写</el-dropdown-item>

              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="wendangguanli">文档管理</el-dropdown-item>

              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="renyuanguanli">人员管理</el-dropdown-item>

              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="moxingguanli">模型管理</el-dropdown-item>

              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="chakan">查看</el-dropdown-item>
              <el-dropdown-item :data-id="scope.row.pkId"
                                divided
                                @click.native="showEditItem">修改</el-dropdown-item>
              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="cloneItem">克隆</el-dropdown-item>
              <el-dropdown-item :data-id="scope.row.pkId"
                                @click.native="showDeleteConfirm">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:foot>
      <el-pagination layout="prev, pager, next"
                     :total="list.total"
                     :page-size="pageSize"
                     :background="true"
                     @current-change="handleCurrentChange"> </el-pagination>
    </template>

    <el-dialog :title="editId>0?'修改工作项':'新建工作项'"
               :visible.sync="dialogVisible"
               width="400px">
      <div class="require">工作项名称</div>
      <div style="margin-top:10px">
        <el-input v-model="workItemForm.name"
                  size="small"></el-input>
      </div>

      <div style="margin-top:10px">项目阶段</div>
      <div style="margin-top:10px">
        <el-select v-model="workItemForm.stage"
                   placeholder="请选择">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div style="margin-top:10px">备注</div>
      <div style="margin-top:10px">
        <el-input v-model="workItemForm.remark"
                  size="small"
                  type="textarea"
                  :maxlength="20"
                  :rows="2"
                  :show-word-limit="true"></el-input>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   @click="dialogVisible = false">取 消</el-button>
        <el-button size="small"
                   type="primary"
                   @click="saveWorkItem">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="确认"
               :visible.sync="dialogDeleteConfirm"
               width="400px">
      <span>确实要删除吗</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogDeleteConfirm = false">取 消</el-button>
        <el-button type="primary"
                   @click="deleteItem">确 定</el-button>
      </span>
    </el-dialog>
  </layout>

</template>
<script>
import layout from '@/components/Layout';
import { default as apiList } from '@/apis/list';
import moment from 'moment';
import { CheckInputIllegal } from '@/utils/utils';
export default {
    name: 'form-list',
    components: { layout },
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            list: {},
            editId: -1,
            workItemForm: {
                name: '',
                remark: '',
                stage: '',
            },
            dialogVisible: false,
            dialogDeleteConfirm: false,
            moment: moment,
            search: '',
            options: [
                {
                    value: '指标编制',
                    label: '指标编制',
                },
                {
                    value: '仿真试验',
                    label: '仿真试验',
                },
                {
                    value: '维修性评估',
                    label: '维修性评估',
                },
                {
                    value: '上会评估',
                    label: '上会评估',
                },
                {
                    value: '结束',
                    label: '结束',
                },
            ],
        };
    },
    mounted() {
        this.moment.locale('zh-cn');
        this.loadList();
    },
    methods: {
        ...apiList,
        loadList: function () {
            if (this.search) {
                if (!CheckInputIllegal(this.search)) {
                    this.$message.error('输入字符串包含非法字符');
                    return;
                }
            }
            this.getList({ orgcode: '000001', search: this.search }, this.pageNum, this.pageSize).then(res => {
                this.list = res.data;
            });
        },
        createWork: function () {
            this.editId = -1;
            this.workItemForm.name = '';
            this.workItemForm.remark = '';
            this.workItemForm.stage = '';
            this.dialogVisible = true;
        },
        saveWorkItem: async function () {
            if (!this.workItemForm.name) {
                this.$message.error('请输入名称');
                return;
            }
            if (!CheckInputIllegal(this.workItemForm.name) || !CheckInputIllegal(this.workItemForm.remark)) {
                this.$message.error('输入字符串包含非法字符');
                return;
            }
            if (!this.workItemForm.stage) {
                this.$message.error('请选择项目阶段');
                return;
            }

            if (this.editId < 0) {
                //新增
                await this.addProj({
                    formConfig: JSON.stringify({}),
                    formData: JSON.stringify({}),
                    graph: JSON.stringify({}),
                    itemId: 1,
                    itemName: this.workItemForm.name,
                    remark: this.workItemForm.remark,
                    stage: this.workItemForm.stage,
                });
            } else {
                //编辑
                this.editItem.itemName = this.workItemForm.name;
                this.editItem.remark = this.workItemForm.remark;
                this.editItem.stage = this.workItemForm.stage;
                await this.saveForm(this.editItem);
            }
            this.loadList();
            this.workItemForm.name = '';
            this.workItemForm.remark = '';
            this.workItemForm.stage = '';

            this.dialogVisible = false;
        },
        deleteItem: async function () {
            let id = this.deleteId;
            await this.deleteProj(id);
            this.loadList();
            this.dialogDeleteConfirm = false;
        },
        cloneItem: async function () {
            let id = event.target.dataset.id;
            //读取现有记录
            let item = await this.getForm(id);
            //删除id
            delete item.data.pkId;
            delete item.data.createDate;
            //修改名称
            item.data.itemName = item.data.itemName + ' COPY';
            //新增记录
            let result = await this.addProj(item.data);
            if (result.data == true) {
                this.loadList();
                this.$message.success('克隆成功');
            }
        },
        showDeleteConfirm() {
            let id = event.target.dataset.id;
            this.deleteId = id;
            this.dialogDeleteConfirm = true;
        },
        showEditItem() {
            let id = event.target.dataset.id;
            this.editId = id;

            this.editItem = this.list.records.find(x => x.pkId == id);
            this.workItemForm.name = this.editItem.itemName;
            this.workItemForm.remark = this.editItem.remark;
            this.workItemForm.stage = this.editItem.stage;
            this.dialogVisible = true;
        },
        fillForm: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/view',
                query: {
                    id: id,
                },
            });
        },
        wendangguanli: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/wendangguanli',
                query: {
                    id: id,
                },
            });
        },

        renyuanguanli: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/renyuanguanli',
                query: {
                    id: id,
                },
            });
        },

        moxingguanli: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/moxingguanli',
                query: {
                    id: id,
                },
            });
        },
        chakan: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/chakan',
                query: {
                    id: id,
                },
            });
        },
        editForm: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/edit',
                query: {
                    id: id,
                },
            });
        },
        drawGraph: function () {
            let id = event.target.dataset.id;
            this.$router.push({
                path: '/graph',
                query: {
                    id: id,
                },
            });
        },
        handleCurrentChange() {
            this.pageNum++;
            this.loadList();
        },
        handleRowClick(row, column) {
            if (column.label == '') return;
            this.$router.push({
                path: '/view',
                query: {
                    id: row.pkId,
                },
            });
        },
    },
};
</script>
<style lang="scss" sccope>
.require {
    &:before {
        content: '*';
        color: #e51400;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
    }
}
.el-dropdown-link {
    width: 60px;
    height: 30px;
    display: inline-block;
}
.el-textarea .el-input__count {
    color: #d5d5d5;
    background: transparent;
}
</style>
